<!-- 新增分区 -->
<template>
  <div>
    <el-dialog title="账单信息" :visible.sync="dialogShow" width="80%" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-descriptions :column="2" class="border-bottom-F2F2F2 margin-bottom-10">
        <el-descriptions-item label="乙方名称">
          <span v-for="item in billObj.partnerList" :key="item.primaryKey" class="padding-right-10">{{ item.partnerName }}&emsp;</span>
        </el-descriptions-item>
        <el-descriptions-item label="合同名称">{{ billObj.contractName }}</el-descriptions-item>
        <el-descriptions-item label="营业周期">{{ billObj.calculateCycleStartTime | formatDateTime('YYYY-MM-DD') }} <span class="padding-left-right-5" v-if="billObj.calculateCycleStartTime && billObj.calculateCycleEndTime">-</span> {{ billObj.calculateCycleEndTime | formatDateTime('YYYY-MM-DD') }}</el-descriptions-item>
        <el-descriptions-item label="营业额">{{ billObj.shareAmount || '暂无' }}<span v-if="billObj.shareAmount">元</span></el-descriptions-item>
        <el-descriptions-item label="出账人">{{ billObj.createUserName }}</el-descriptions-item>
        <el-descriptions-item label="出账时间">{{ billObj.createTime | formatDateTime('YYYY-MM-DD') }}</el-descriptions-item>
      </el-descriptions>

      <div class="font-weight-600 font-size-17 padding-bottom-10">账单信息</div>
      <el-table :border="true" :data="billObj.billItemList">
        <el-table-column align="center" label="序号" prop="kjine">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="资产" prop="shopNumber" />
        <el-table-column align="center" label="费项名称" prop="kjine">
          <template slot-scope="scope">
            <span>{{ billTypeList[scope.row.bizType] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="账单起付时间" prop="kjine">
          <template slot-scope="scope">
            <span>{{ scope.row.cycleStartTime | formatDateTime('YYYY-MM-DD') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="账单截止时间" prop="kjine">
          <template slot-scope="scope">
            <span>{{ scope.row.cycleEndTime | formatDateTime('YYYY-MM-DD') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="付款截止时间" prop="kjine">
          <template slot-scope="scope">
            <span>{{ scope.row.paymentDeadline | formatDateTime('YYYY-MM-DD') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="账单金额">
          <template slot-scope="scope">
            <input type="text" class="no-border-input" :readonly="isInfo ? true : false" v-model="scope.row.amountReceivable" @blur="computeMoney(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="未付金额" prop="weifujine" />
        <el-table-column align="center" label="已付金额" prop="amountReceived" />
      </el-table>
      <el-form ref="form" :model="billObj" label-width="90px" class="margin-top-20">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="减免金额">
              <el-input v-model="billObj.amountDiscount" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="说明">
              <el-input v-model="billObj.billDesc" :readonly="isInfo ? true : false" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="font-weight-600 font-size-17 padding-top-15 padding-bottom-10">付款记录</div>
      <el-descriptions v-for="(item, index) in recordList" :key="index" :column="2" class="border-bottom-F2F2F2 margin-bottom-10">
        <el-descriptions-item label="付款时间">{{ item.actualPaymentDate | formatDateTime('YYYY-MM-DD') }}</el-descriptions-item>
        <el-descriptions-item label="付款金额">{{ item.paymentAmount }}元</el-descriptions-item>
        <el-descriptions-item label="付款账号">{{ item.paymentAccount }}</el-descriptions-item>
        <el-descriptions-item label="付款银行">{{ item.paymentBank }}</el-descriptions-item>
        <el-descriptions-item label="交易流水号">{{ item.transactionNumber }}</el-descriptions-item>
        <el-descriptions-item label="确认人">{{ item.confirmUser }}</el-descriptions-item>
        <el-descriptions-item label="付款凭证">
          <el-link type="primary" :underline="false" v-for="file in item.attachmentList" :key="file.primaryKey" @click="uploadLoad(file.fileUrl)">{{ file.fileTitle }}</el-link>
        </el-descriptions-item>
      </el-descriptions>

      <div v-if="!isInfo" slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false" class="el-button-reset">取 消</el-button>
        <el-button v-if="billObj.businessKey" type="primary" @click="recallBill">撤回账单</el-button>
        <el-button v-if="!billObj.businessKey" type="primary" @click="doApprove">提审</el-button>
        <el-button v-if="!billObj.businessKey" type="primary" @click="doSave">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  //未付金额 ： 每一条的实收金额（可修改的钱） - 已收金额（不体现在table中）, 如果已收金额等于账单金额，不允许修改
  //减免金额 ： 每一条的账单金额 - 实收金额（可修改的钱，必须比之前的小） 的差值 的总和
  import { apiUpdateBill } from '../../../api/contract';
  import { accSubtr } from '@/common/js/utils.js';
  import { requestTips, askDialog } from '../../../assets/util';
  import { apiCreateAudit, apiRecall } from '../../../api/common';

  export default {
    props: {
      isInfo: {
        type: Boolean,
        default: true,
      },
      billObj: {
        type: Object,
        default: () => {
          return {};
        },
      },
      recordList: {
        type: Array,
        default: () => {
          return [];
        },
      },
      billTypeList: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    data() {
      return {
        dialogShow: false,
        issApprove: false,
      };
    },

    mounted() {},

    methods: {
      //撤回账单
      recallBill() {
        askDialog('确认撤回？', async () => {
          this.recallBillFn();
        });
      },
      async recallBillFn() {
        let res = await apiRecall({
          businessKey: this.billObj.businessKey,
        });
        requestTips(res, async () => {
          this.dialogShow = false;
        });
      },
      //提审
      doApprove() {
        this.issApprove = true;

        this.$confirm('确认提交？', '提示', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          customClass: 'bigZindex',
        })
          .then(() => {
            this.saveFn();
          })
          .catch(action => {});
      },
      //保存
      async doSave() {
        this.issApprove = false;
        this.saveFn();
      },
      async saveFn() {
        let res = await apiUpdateBill(this.billObj);
        if (this.issApprove) {
          if (res.success) {
            this.submitFn();
          } else {
            this.$message.error(res.message);
          }
        } else {
          requestTips(res, async () => {
            this.dialogShow = false;
          });
        }
      },
      //提审
      async submitFn() {
        let userInfo = JSON.parse(localStorage.getItem('userInfo'));
        console.log(this.billObj);
        let param = {
          businessKey: this.billObj.primaryKey, //废止合同保存的主键
          userPrimaryKey: userInfo.key,
          projectKey: this.billObj.projectKey,
          type: '账单', //合同,账单,付款,合同终止
          typeKey: 'bill', //contractSubmit,bill,payment,contractTermination
        };
        let res = await apiCreateAudit(param);
        requestTips(res, async () => {
          this.$emit('getInfo');
          this.dialogShow = false;
        });
      },
      //计算钱
      computeMoney(row) {
        if (Number(row.amountReceivable) <= Number(row.amountReceived)) {
          row.amountReceivable = row.amountReceived;
        }
        row.weifujine = accSubtr(Number(row.amountReceivable), Number(row.amountReceived));
        this.getDerate();
      },

      //计算减免金额
      getDerate() {
        this.billObj.amountDiscount = 0;
        this.billObj.billItemList.forEach(item => {
          //item.amountOriginal 初始金额，永远不会变的
          let differenceVal = accSubtr(Number(item.amountReceivable), Number(item.amountOriginal));
          differenceVal = Number(differenceVal);
          differenceVal = differenceVal > 0 ? 0 : Math.abs(differenceVal);
          item.amountDiscount = differenceVal;
          this.billObj.amountDiscount += differenceVal;
        });
      },
      //下载
      uploadLoad(url) {
        let a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .no-border-input {
    text-align: center;
    width: 100%;
  }
  ::v-deep .el-form-item__label {
    padding-left: 0;
  }
</style>
